<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体检预约</title>
		<script src="js/vue.global.js"></script>
		<script src="js/element-plus.full.js"></script>
		<script src="js/element-plus-icons-vue.iife.min.js"></script>
		<link rel="stylesheet" href="css/element-plus-index.css" />
		<link rel="stylesheet" href="css/main.css" />
	</head>
	<body>
			<div id="app">
					<!-- 面包屑 -->
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>预约</el-breadcrumb-item>
						<el-breadcrumb-item>体检预约</el-breadcrumb-item>
					</el-breadcrumb>
					<!-- 两个按钮 -->
					<div style="margin-top: 20px; margin-bottom: 20px">
						<el-button type="primary" round>预约</el-button>
						<el-button type="primary" round>清空</el-button>
					</div>
					<!-- 基本信息 -->
					<div>
						<el-descriptions class="margin-top" title="基本信息" :column="3" :size="size" border>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<Tickets />
										</el-icon>
										体检单号
									</div>
								</template>
								<el-input v-model="input" placeholder="20231008990202120" disabled />
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<user />
										</el-icon>
										姓名
									</div>
								</template>
								<el-input v-model="name" placeholder="输入姓名" />
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<Female />
										</el-icon>
										性别
									</div>
								</template>
								<el-select v-model="options.value" class="m-2" placeholder="选择性别">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<Phone />
										</el-icon>
										手机号
									</div>
								</template>
								<el-input v-model="phone" placeholder="输入手机号" />
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<Calendar />
										</el-icon>
										出生日期
									</div>
								</template>
								<el-date-picker v-model="birthday" type="date" placeholder="Pick a day" :size="size" />
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<Postcard />
										</el-icon>
										身份证号
									</div>
								</template>
								<el-input v-model="cardNumber" placeholder="输入身份证号码" />
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<location />
										</el-icon>
										家庭住址
									</div>
								</template>
								<el-input v-model="address" placeholder="输入通讯地址" />
							</el-descriptions-item>
						</el-descriptions>
					</div>
					<!-- 预约信息 -->
					<div style="margin-top: 20px;">
						<el-descriptions class="margin-top" title="预约信息" :column="1" :size="size" border>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<location />
										</el-icon>
										预约院区
									</div>
								</template>
								<el-select v-model="yuanqu.value" class="m-2" placeholder="选择院区地址">
									<el-option v-for="item in yuanqu" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										<el-icon :style="iconStyle">
											<Document />
										</el-icon>
										院区描述
									</div>
								</template>
								营业时间： 周一至周六 7:30-11:30 <br>
								采血截止：10:30<br>
								联系电话：4006297568<br>
								地址：沈阳市浑南区创新路175号（智慧大街交互处）
							</el-descriptions-item>
						</el-descriptions>
						<!-- 预约详情 -->
						<div style="margin-top: 20px;">
							<el-descriptions class="margin-top" title="预约详情" :column="3" :size="size" border>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<Notification />
											</el-icon>
											预约类型
										</div>
									</template>
									<el-select v-model="yuyuetype.value" class="m-2" placeholder="预约类型">
										<el-option v-for="item in yuyuetype" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<Notification />
											</el-icon>
											预约套餐
										</div>
									</template>
									<el-select v-model="yuyuetaocao.value" class="m-2" placeholder="预约套餐">
										<el-option v-for="item in yuyuetaocao" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<Star />
											</el-icon>
											体检时间
										</div>
									</template>
									<el-date-picker v-model="yuyuedate" type="date" placeholder="Pick a day" :size="size" />
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<Star />
											</el-icon>
											体检时段
										</div>
									</template>
									<el-select v-model="tijianshiduan.value" class="m-2" placeholder="体检时段">
										<el-option v-for="item in tijianshiduan" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<user />
											</el-icon>
											套餐价格
										</div>
									</template>
									<el-input v-model="input" placeholder="1500" disabled />
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<user />
											</el-icon>
											优惠补贴
										</div>
									</template>
									<el-input v-model="input" placeholder="400" disabled />
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<user />
											</el-icon>
											结算金额
										</div>
									</template>
									<el-input v-model="input" placeholder="1100" disabled />
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>
										<div class="cell-item">
											<el-icon :style="iconStyle">
												<user />
											</el-icon>
											结算类别
										</div>
									</template>
									<el-select v-model="jiesuanliebie.value" class="m-2" placeholder="结算类别">
										<el-option v-for="item in jiesuanliebie" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-descriptions-item>
							</el-descriptions>
						</div>
						<!-- 套餐详情 -->
						<div style="margin-top: 20px;">
							<el-descriptions title="套餐详情" direction="vertical" :column="4" :size="size" border>
								<!-- 第一行-->
								<el-descriptions-item label="检查项目">肺部CT</el-descriptions-item>
								<el-descriptions-item label="检查内容">CT检查【肺部-平扫】</el-descriptions-item>
								<el-descriptions-item label="检查意义" :span="2">
									用于检查肺部有无良性恶性肿瘤，结核，炎症和间质性，弥漫性病变等。
								</el-descriptions-item>
		
								<!-- 第二行-->
								<el-descriptions-item label="检查项目">头部CT</el-descriptions-item>
								<el-descriptions-item label="检查内容">头颅骨CT</el-descriptions-item>
								<el-descriptions-item label="检查意义" :span="2">
									CT检查头部影像
								</el-descriptions-item>
		
								<!-- 第三行-->
								<el-descriptions-item label="检查项目" :span="1">肿瘤两项</el-descriptions-item>
								<el-descriptions-item label="检查内容" :span="1">癌胚抗原测定（定量）,甲胎蛋白测定</el-descriptions-item>
						  <el-descriptions-item label="检查意义" :span="2">
									癌胚抗原：系广谱性肿瘤标志物，对大肠癌、胰腺癌的筛查、疗效观察和预后评估有重要的临床意义。<br>
									在胃、乳腺、肺癌等也可升高。 甲胎蛋白：对原发性肝癌的诊断、疗效观察和预后评估有重要的临床意义。<br>
									在卵巢、胃、胰腺癌、睾丸癌等肿瘤及肝炎、肝硬化等疾病也有异常发现。孕期可出现升高。
								</el-descriptions-item>
		
								<!-- 第四行-->
								<el-descriptions-item label="检查项目" :span="1">C13呼气试验</el-descriptions-item>
								<el-descriptions-item label="检查内容" :span="1">C13呼气试验</el-descriptions-item>
								<el-descriptions-item label="检查意义" :span="2">
									空腹 ，一个月以内使用过抗生素和胃药者不宜做此检查。<br>
									13碳-尿素呼气试验阳性示有幽门螺杆菌感染，它与胃部炎症、消化性溃疡、胃癌的发生密切关联。
								</el-descriptions-item>
								
								<!-- 第五行-->
								<el-descriptions-item label="检查项目" :span="1">甲功三项</el-descriptions-item>
								<el-descriptions-item label="检查内容" :span="1">血清游离甲状腺素测定</el-descriptions-item>
								<el-descriptions-item label="检查意义" :span="2">
									判断甲状腺功能，鉴别免疫性疾病
								</el-descriptions-item>
								
								<!-- 第六行-->
								<el-descriptions-item label="检查项目" :span="1">颈动脉彩超</el-descriptions-item>
								<el-descriptions-item label="检查内容" :span="1">彩色多普勒超声检查【颈动脉】</el-descriptions-item>
								<el-descriptions-item label="检查意义" :span="2">
									通过彩色超声仪器采用无创性检查方法，检测颈动脉结构和动脉粥样硬化斑形态、范围、性质、动脉狭窄程度等；<br>
									早期发现动脉血管病变，为有效预防和减少冠心病、缺血性脑血管病等心脑血管疾病发病提供客观的血流动力学依据。
								</el-descriptions-item>
							</el-descriptions>
						</div>
					</div>
	</body>
		<script>
			const App = {
				data() {
					return {
						name: '', //姓名
						//性别
						options: [{
								value: 'boy',
								label: '男士',
							},
							{
								value: 'women',
								label: '已婚女士',
							},
							{
								value: 'girl',
								label: '未婚女士',
							}
						],
						//手机号
						phone: '',
						birthday: '',
						cardNumber: '',
						address: '',
	
						//预约信息
						//预约院区
						yuanqu: [{
								value: 'hunnan',
								label: '沈阳熙康云医院-浑南院区'
							},
							{
								value: 'sanhao',
								label: '沈阳熙康云医院-三好街院区'
							},
							{
								value: 'shijidasha',
								label: '沈阳熙康云医院-世纪大厦'
							},
						],
						//预约类型
						yuyuetype: [{
								value: 'tuantiyuyue',
								label: '团体预约'
							},
							{
								value: 'tijianyuyue',
								label: '个检预约'
							}
						],
						//预约套餐
						yuyuetaocao: [{
								value: 'taocanA',
								label: '23东软家属已婚女士套餐A'
							},
							{
								value: 'taocanB',
								label: '23东软家属已婚女士套餐B'
							},
							{
								value: 'taocanC',
								label: '23东软家属已婚女士套餐C'
							},
							{
								value: 'taocanD',
								label: '23东软家属已婚女士套餐D'
							}
						],
						yuyuedate: '', //预约时间
						jiesuanliebie: [{
								value: 'zhifubao',
								label: '支付宝'
							},
							{
								value: 'wechat',
								label: '微信'
							},
							{
								value: 'yibao',
								label: '医保'
							},
							{
								value: 'xianjian',
								label: '现金'
							},
							{
								value: 'yinhangka',
								label: '银行卡'
							}
						],
						tijianshiduan: [{
								value: 'am',
								label: '上午'
							},
							{
								value: 'pm',
								label: '下午'
							}
						]
					}
				},
				methods: {}
			};
			const app = Vue.createApp(App);
			app.use(ElementPlus);
			app.component("User", ElementPlusIconsVue.User);
			app.component("Female", ElementPlusIconsVue.Female);
			app.component("Phone", ElementPlusIconsVue.Phone);
			app.component("Postcard", ElementPlusIconsVue.Postcard);
			app.component("Calendar", ElementPlusIconsVue.Calendar);
			app.component("Document", ElementPlusIconsVue.Document);
			app.component("tickets", ElementPlusIconsVue.Tickets);
			app.component("location", ElementPlusIconsVue.Location);
			app.component("Notification", ElementPlusIconsVue.Notification);
			app.component("Star", ElementPlusIconsVue.Star);
			app.mount("#app");
		</script>
</html>